<template>
  <div>
    <van-tabbar v-model="active" active-color="#ff0000" @change="qiehuan">
      <van-tabbar-item icon="chat-o" badge="5">强国通</van-tabbar-item>
      <van-tabbar-item icon="music-o" dot>百灵</van-tabbar-item>
      <van-tabbar-item>
        <van-image
          round
          width="3rem"
          height="3rem"
          src="https://img.qiluyidian.net/2020211cdd97be9ce2d913af92d0e8db3c6e023.jpg?imageView2/2/w/720/q/85%7Cimageslim"
          :class="{gray:active!=2}"
        />
      </van-tabbar-item>
      <van-tabbar-item icon="play-circle-o">电视台</van-tabbar-item>
      <van-tabbar-item icon="service-o">电台</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "NavVue",
  data() {
    return {
      active: 2,
      arrs:[
        {title:'强国通',path: '/qiangguotong'},
        {title:'百灵',path: '/bailing'},
        {title:'首页',path: '/home'},
        {title:'电视台',path: '/dianshitai'},
        {title:'电台',path: '/diantai'},
      ]
    };
  },
  methods:{
    qiehuan(){
      this.$router.push(`${this.arrs[this.active].path}`).catch(r=>{})
    }
  },
  mounted(){
    // console.log(this.$route.path);
    this.arrs.forEach((item,index) =>{
      if (item.path==this.$route.path) {
        this.active=index
      }
    })
  }
};
</script>

<style scoped>
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
</style>